@import 'styles/common.scss';

.container {
    height         : 100%;
    width          : 100%;
    font-size      : 19px;
    color          : darkslategray;
    display        : flex;
    flex-direction : row;
    justify-content: center;
    align-items    : center;
    background     : #3F51B5;
    overflow       : hidden;
}

.content {
    width          : 400px;
    height         : 200px;
    position       : relative;
    display        : flex;
    flex-direction : row;
    justify-content: center;
    align-items    : center;
    overflow       : hidden;

    &::before,
    &::after {
        content : '';
        width   : 50px;
        height  : 100%;
        position: absolute;
        top     : 0;
        z-index : 1;
    }

    &::before {
        left      : 0;
        background: linear-gradient(to right, rgb(63, 81, 181), rgba(0, 0, 0, 0));
    }

    &::after {
        right     : 0;
        background: linear-gradient(to right, rgba(0, 0, 0, 0), rgb(63, 81, 181));
    }


    .backgroundImg {
        width         : 600px;
        height        : 600px;
        position      : absolute;
        top           : 0;
        pointer-events: none;

        // animation     : 120s linear 0s infinite normal none running spin-continuous-centered;

        animation-delay          : 0s;
        animation-direction      : normal;
        animation-duration       : 120s;
        animation-fill-mode      : none;
        animation-iteration-count: infinite;
        animation-name           : spin-continuous-centered;
        animation-play-state     : running;
        animation-timing-function: linear;
    }

    .buttonContent {
        width     : 100%;
        position  : absolute;
        bottom    : 0;
        left      : 0;
        z-index   : 2;
        text-align: center;
    }
}

@keyframes spin-continuous-centered {
    0% {
        left     : 50%;
        transform: translateX(-50%) rotate(0deg);
    }

    100% {
        left     : 50%;
        transform: translateX(-50%) rotate(360deg);
    }
}